<template>
  <!-- 封装整个 图表的配置 -->
  <div ref="myChart" style="width: 600px; height: 500px"></div>
</template>

<script>
// 按需加载
import * as echarts from "echarts/core";
import {
  BarChart,
  PieChart,
  MapChart,
  EffectScatterChart,
  LinesChart,
} from "echarts/charts";
import {
  TitleComponent,
  GridComponent,
  TooltipComponent,
  GeoComponent,
  VisualMapComponent,
  DatasetComponent,
  LegendComponent,
  GraphicComponent,
  ToolboxComponent,
} from "echarts/components";
import { LabelLayout, UniversalTransition } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";

echarts.use([
  BarChart,
  PieChart,
  MapChart,
  LinesChart,
  EffectScatterChart,
  TitleComponent,
  GridComponent,
  TooltipComponent,
  DatasetComponent,
  GeoComponent,
  LegendComponent,
  GraphicComponent,
  ToolboxComponent,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer,
  VisualMapComponent,
]);

export default {
  props: {
    // 子组件接受哪些  props 需要在这里注册
    options: {
      type: Object, // 约束数据结构
      required: true, // 必传字段
      default: () => ({}), // 默认值
    },
  },
  // 监听数据，如果传递的数据发生改变，那么就要重新 setOption
  watch: {
    options: {
      deep: true, // 监听对象属性及其所有子属性
      handler: function (newOptions, oldOptions) {
        console.log("监听到数据改变了：", newOptions, oldOptions);
        this.chart.setOption(this.options);
      },
    },
  },
  mounted() {
    // const dom = document.getElementById("id"); // 选择 dom 节点，选择 dom 节点只能使用 id？
    console.log(this.$refs.myChart);
    // this 可以代表当前组件，所以非响应式数据可以直接挂载在 this 上
    this.chart = echarts.init(this.$refs.myChart); // 图表实例
    this.chart.setOption(this.options); // echarts 如果需要更新数据，则必须调用 setOption 进行更新

    // 因为这是封装的基础组件，通过这种方式添加的事件，会导致所有图表组件都有这个事件
    // this.chart.on("click", function () {
    //   console.log("给图表添加事件");
    // });
  },
};
</script>

<style></style>